<template>
  <div class="app-container">
    <!--工具栏-->
    <div class="head-container">
      <div>
        <!-- 查询条件 -->
        <el-form ref="searchForm" :model="searchForm" label-width="120px" class="search-form" :rules="rules">
          <el-row>
            <el-col :span="7">
              <el-form-item label="单位编号" prop="aab001">
                <unit-rpc ref="unitRpc" @unitRpcCallBack="unitRpcCallBack" />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="单位名称">
                <el-input v-model="searchForm.aab004" :disabled="true" />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="对应费款所属期">
                <el-date-picker
                  v-model="searchForm.dateRange"
                  type="monthrange"
                  format="yyyyMM"
                  value-format="yyyyMM"
                  placeholder="请选择对应费款所属期"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="7">
              <el-form-item label="人员编号" prop="aac001">
                <person-rpc ref="personRpc" @personRpcCallBack="personRpcCallBack" />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="姓名">
                <el-input v-model="searchForm.aac003" placeholder="请输入姓名" :disabled="true" />
              </el-form-item>
            </el-col>
            <el-col :span="5" class="text-right" style="float: right">
              <el-form-item>
                <el-button type="primary" @click="search">查询</el-button>
                <el-button type="primary" @click="save">保存</el-button>
                <el-button @click="reset">重置</el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <!--      <crudOperation :permission="permission" />-->
      <!--表格渲染-->
      <el-table ref="table" v-loading="crud.loading" :data="crud.data" size="small" style="width: 100%;" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" />
        <el-table-column prop="aac001" label="个人编号" width="150" />
        <el-table-column prop="aac003" label="姓名" />
        <el-table-column prop="aab001" label="单位编号" width="150" />
        <el-table-column prop="aab004" label="单位名称" width="150" />
        <el-table-column prop="aaa115" label="应缴类型" />
        <el-table-column prop="aae140" label="险种类型" />
        <el-table-column prop="aae002" label="费款所属期" />
        <el-table-column prop="aae003" label="对应费款所属期" width="120" />
        <el-table-column prop="aae180" label="缴费基数" />
        <el-table-column prop="aae080" label="单位缴费金额" width="120" />
        <el-table-column prop="aaa042" label="单位缴费比例" width="120" />
        <el-table-column prop="aae082" label="个人缴费金额" width="120" />
        <el-table-column prop="aaa041" label="个人缴费比例" width="120" />
        <el-table-column prop="aaz223" label="人员缴费id" width="120" />
      </el-table>
      <!--分页组件-->
      <pagination />
    </div>
  </div>
</template>

<script>
import crudAccountAc43 from '@/views/ynsb_comm/ac43/accountAc43'
import CRUD, { presenter, header, form, crud } from '@crud/crud'
import pagination from '@crud/Pagination'
import UnitRpc from '@/views/ynsb_comm/comm/module/unitRpc'
import PersonRpc from '@/views/ynsb_comm/comm/module/personRpc'

const defaultForm = { aac001: null, aac002: null, aac003: null, aac004: null, aac005: null, aac006: null, aac327: null, aac058: null, aac007: null, aae013: null }
export default {
  name: 'BasicAc01',
  components: { PersonRpc, pagination, UnitRpc },
  mixins: [presenter(), header(), form(defaultForm), crud()],
  cruds() {
    return CRUD({ title: '查询人员缴费明细', url: 'api/accountAc43/getPersonFrees', idField: 'aac001', sort: 'aac001,desc', crudMethod: { ...crudAccountAc43 }})
  },
  // 数据字典
  dicts: ['aac004', 'aac058'],
  data() {
    return {
      rules: {
        aab001: [
          { required: true, message: '单位编号不能为空', trigger: 'blur' }
        ]
      },
      searchForm: {
        aac001: '', // 人员编号
        aac003: '', // 姓名
        aab001: '', // 单位编号
        aab004: '', // 单位名称
        dateRange: '' // 时间范围
      },
      dialogVisible: false, // 控制弹窗的显示与隐藏
      selectedRow: null, // 存储被双击的行数据
      aac001: '', // 个人编号
      flag: false,
      aab001: '', // 单位编号
      selectedRows: [] // 勾选选中的行
    }
  },
  methods: {
    // 钩子：在获取表格数据之前执行，false 则代表不获取数据
    [CRUD.HOOK.beforeRefresh]() {
      if (this.searchForm.aab001) {
        return true
      } else {
        return false
      }
    },
    unitRpcCallBack(item) {
      this.form.aab001 = item.aab001
      this.form.aab004 = item.aab004
      this.aab001 = item.aab001
      this.searchForm.aab001 = item.aab001
      this.searchForm.aab004 = item.aab004
    },
    handleSelectionChange(val) {
      this.selectedRows = val
      console.log(val, '选中')
    },
    formatter(row, column, cellValue) {
      // 根据 aae140 的值进行转码
      const key = column.property
      const data = this.dict[key]
      const dataList = data.filter(item => item.value === cellValue)
      console.log(dataList, 'data')
      if (dataList !== null && dataList !== [] && dataList !== undefined && dataList.length > 0) {
        return dataList[0].label
      } else {
        return cellValue
      }
    },
    personRpcCallBack(item) {
      this.form.aac001 = item.aac001
      this.searchForm.aac001 = item.aac001
      this.searchForm.aac003 = item.aac003
    },
    // 保存
    save() {
      const businessList = this.selectedRows
      if (businessList.length === 0) {
        this.$message.error('暂无可提交的数据，请先勾选保存')
        return
      }
      const param = {
        businessList: JSON.stringify(businessList),
        aab001: this.aab001
      }
      crudAccountAc43.toSave({ ...param }).then(res => {
        console.log(res, '保存回调')
      })
    },
    search() {
      this.$refs.searchForm.validate((valid) => {
        if (valid) {
          const startDate = this.searchForm.dateRange === undefined ? '' : this.searchForm.dateRange[0]
          const endDate = this.searchForm.dateRange === undefined ? '' : this.searchForm.dateRange[1]
          this.crud.params = {
            aac001: this.searchForm.aac001,
            aab001: this.searchForm.aab001,
            aae140: this.searchForm.aae140 === undefined ? '' : this.searchForm.aae140,
            aae041: startDate,
            aae042: endDate
          }
          this.crud.pageChangeHandler(1)
        } else {
          console.log('表单验证失败')
          return false
        }
      })
      // 假设查询的数据
      // crudAccountAc43.getAc08({ ...this.searchForm }).then(res => {
      //   console.log(res, 'res')
      //   this.crud.data = res.content
      // })
    },
    reset() {
      this.$refs.personRpc.restAac001('')
      this.searchForm = {
        aac001: '',
        aac003: '',
        aab001: '',
        aab004: ''
      }
      this.tableData = [] // 清空表格数据
    },
    queryCallBack() {
      this.dialogVisible = false // 显示弹窗
    },
    // 双击行触发的事件
    handleRowDblClick(row) {
      console.log(row, 'row')
      this.aac001 = row.aac001
      this.selectedRow = row // 获取双击的行数据
      this.dialogVisible = true // 显示弹窗
      setTimeout(() => {
        this.$refs.ac02ref.getAc02s()
      }, 500) // 延迟1秒后显示弹窗
    },
    // 日期格式转换
    formatDate(row, column, cellValue) {
      // 格式化日期为 YYYY-MM-DD
      if (cellValue !== null && cellValue !== undefined) {
        const date = new Date(cellValue)
        const year = date.getFullYear()
        const month = (date.getMonth() + 1).toString().padStart(2, '0')
        const day = date.getDate().toString().padStart(2, '0')
        return `${year}-${month}-${day}`
      } else {
        return '--'
      }
    }
  }
}
</script>

<style scoped>

</style>
